import { ref } from 'vue'
import { findTopCategory } from '@/api/category'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
// 路由缓存？ id变了 但是内容没有重新获取
// 原因: 性能考虑一个优化动作默认就有 当路径path没变的情况下会直接复用对应的组件

// 复用组件 -> 组件不会初始化 -> 初始化生命周期钩子函数都不会重新执行(setup) ->
// useCategory不执行 -> loadCategory不执行！！！ 接口无法重新发送

// 解决思路：1.不走缓存  2.让id每次变化的时候loadCategory重新执行

// 解决方案：
// 1.router-view 加一个独一无二的key
// 2. onBeforeRouterUpdate 路由每次变化时都会触发的一个钩子函数

export function useCategory () {
  const loadCategoryList = ref([])
  // id？ 路由上面获取的？ this.$route.params.id
  // setup使用路由参数？ useRoute
  // 如果想要路由跳转？ useRouter  this.$router
  const route = useRoute()
  // 函数参数默认值
  // 如果你给我传参了就以你的为主 如果没有传就使用默认参数
  // 首次加载数据的时候 由于没有传递参数 所以使用route.params.id
  // 当id发生变化时 由于传递了参数 所以就使用 to.params.id
  // console.log(route.params.id)
  async function loadCategoryFn (id) {
    const res = await findTopCategory(id = route.params.id)
    console.log('分类数据', res)
    loadCategoryList.value = res.data.result.children
  }
  loadCategoryFn()
  onBeforeRouteUpdate((to) => {
    // id变化之后 这里每次都会重复执行
    // 问题: route.params.id 拿到的id并不对 拿到不是最新的id
    // to: 跳转到的最新的路由 路由对象
    // to.params.id 就可以拿到当前最新的参数id 使用它获取数据即可
    // console.log(to.params.id)
    loadCategoryFn(to.params.id)
  })
  return {
    loadCategoryList
  }
}
